<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="clearfix">
        <span>说明: 目前支持学科和关键字条件筛选</span>
        <el-button style="float: right; font-size: 12px" type="success" icon="el-icon-edit" @click="$router.push('/questions/new')">新建试题</el-button>
        <el-form style="margin-top:35px" :model="formList" ref="FormRef" label-position='right' label-width="80px">
          <el-row>
            <el-col :span="6">

              <el-form-item label="学科" prop="subjectID">
                <el-select placeholder="请选择" v-model="formList.subjectID">
                  <el-option v-for="item in subjects" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="试题类型" prop="questionType">
                <el-select placeholder="请选择" v-model="formList.questionType">
                  <el-option v-for="item in questionType" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="formList.remarks"></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="6">

              <el-form-item label="二级目录" prop="catalogID">
                <el-select placeholder="请选择" v-model="formList.catalogID">
                  <el-option v-for="item in twoLevelDirectory" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="难度" prop="difficulty">
                <el-select placeholder="请选择" v-model="formList.difficulty">
                  <el-option v-for="item in difficulty" :key="item.value" :value="item.label" :label="item.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="formList.shortName"></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="6">

              <el-form-item label="标签" prop="tags">
                <el-select placeholder="请选择" v-model="formList.tags">
                  <el-option v-for="item in tags" :key="item.value" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="方向" prop="direction">
                <el-select placeholder="请选择" v-model="formList.direction">
                  <el-option v-for="(item,index) in direction" :key="index" :value="item"></el-option>
                </el-select>
              </el-form-item>

              <el-row :gutter="10">
                <el-form-item label="城市" prop="city">
                  <el-col :span="12">
                    <el-select placeholder="请选择" v-model="formList.city">
                      <el-option v-for="(item,index) in provinces" :key="index" :value="item"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select placeholder="请选择" v-model="formList.province">
                      <el-option v-for="(item,index) in citys" :key="index" :value="item"></el-option>
                    </el-select>
                  </el-col>
                </el-form-item>

              </el-row>

            </el-col>
            <el-col :span="6">

              <el-form-item label="关键字" prop="keyword">
                <el-input placeholder="根据题干搜索" v-model="formList.keyword"></el-input>
              </el-form-item>

              <el-form-item label="录入人" prop="creatorID">
                <el-select placeholder="请选择" v-model="formList.creatorID">
                  <el-option v-for="item in creatorID" :key="item.id" :label="item.username" :value="item.username"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item style="float:right">
                <el-button size="small" @click="reset">清除</el-button>
                <el-button type="primary" size="small" @click="search">搜索</el-button>
              </el-form-item>

            </el-col>
          </el-row>
          <!-- 四个按钮 -->
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane v-for="item in chkTypes" :key='item.value' :label="item.label" :value="item.value"></el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
      <el-alert :title='title' type="info" class="alert" :closable='false' show-icon style="margin-bottom:10px"></el-alert>
      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="试题编号" prop="number" width="120">
        </el-table-column>
        <el-table-column label="学科" prop="subject" width="120">
        </el-table-column>
        <el-table-column label="目录" prop="catalog" width="120">
        </el-table-column>
        <el-table-column label="题型" width="120" :formatter="formQuest">
        </el-table-column>
        <el-table-column label="题干" width="260">
          <template #default='{row}'>
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate" width="200" :formatter="formDate">
        </el-table-column>
        <el-table-column label="难度" prop="difficulty" width="120" :formatter="formDiff">
        </el-table-column>
        <el-table-column label="录入人" prop="creator" width="150">
        </el-table-column>
        <el-table-column label="审核状态" prop="chkState" width="120" :formatter="formChk">
        </el-table-column>
        <el-table-column label="审核意见" prop="chkRemarks" width="180">
        </el-table-column>
        <el-table-column label="审核人" prop="chkUser" width="120">
        </el-table-column>
        <el-table-column label="发布状态" prop="publishState" width="120" :formatter="formPub">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200" #default="{row}">

          <el-button type="text" style="font-size:10px" @click="see(row)">预览</el-button>

          <el-button type="text" style="font-size:10px" @click="check(row)" :disabled="row.chkState==0? false:true">审核</el-button>
          <el-button type="text" style="font-size:10px" @click="$router.push(`new?id=${row.id}`)" :disabled="row.publishState===1? true:false">修改</el-button>
          <el-button type="text" style="font-size:10px" @click="upDown(row)">{{row.publishState===1? '下架':'上架'}}</el-button>
          <el-button type="text" style="font-size:10px" :disabled="row.publishState===1? true:false" @click="handelDel(row)">删除</el-button>

        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <div class="pages">
        <el-pagination background @current-change="onPageChange" @size-change="onPageSizeChange" :current-page="formList.page" :total="total" :page-size="formList.pagesize" :page-sizes="[5,10,15,20]" layout="->, prev, pager, next, sizes, jumper">
        </el-pagination>
      </div>
    </el-card>
    <!-- 预览弹窗 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%" @close="handlerClose">

      <div style="margin-bottom:20px">
        <span style="margin-right:100px">【题型】: {{quest}}</span>
        <span style="margin-right:100px">【编号】: {{detail.id}}</span>
        <span style="margin-right:100px">【难度】: {{difficult}}</span>
        <span style="margin-right:100px">【标签】: {{detail.tags}}</span>
      </div>
      <div>
        <span style="margin-right:100px">【学科】: {{detail.subjectName}}</span>
        <span style="margin-right:100px">【目录】: {{detail.directoryName}}</span>
        <span style="margin-right:100px">【方向】: {{detail.direction}}</span>
      </div>
      <el-divider></el-divider>
      <div>【题干】:</div>
      <div v-html="detail.question"></div>
      <div>{{quest}} <span>(一下选中的选项为正确答案)</span></div>
      <el-radio-group v-model="isChoice" v-if="detail.questionType==1">
        <el-radio v-for="item in option" :key="item.id" :label="item.isRight" :disabled='item.isRight===isChoice? false:true' style="display: block;margin:5px 0">{{item.code}}</el-radio>
      </el-radio-group>
      <el-checkbox-group v-model="checkList" v-if="detail.questionType==2">
        <el-checkbox v-for="item in option" :key="item.id" :label="item.isRight">{{item.code}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <div>【参考答案】:
        <span>
          <el-button type="danger" size="small" @click="show=true">视频答案预览</el-button>
        </span>
      </div>
      <div v-if="show"><video :src="detail.videoURL" controls="controls" style="width:400px;height:300px;margin-top:10px"></video></div>
      <el-divider></el-divider>
      <div>
        【答案解析】:<span v-html="detail.answer" style="display: inline-block;"></span>
      </div>
      <el-divider></el-divider>
      <div>
        【题目备注】:{{detail.remarks}}
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 审核 -->
    <Check :dialog-check.sync='dialogCheck' :id='id' />
  </div>
</template>

<script>
import Check from '../components/questions-check.vue'
import { choice, detail, choicePublish, remove } from '@/api/hmmm/questions.js'
// 导入成绩接口列表
import { simple as simple1 } from '@/api/hmmm/subjects.js'
import { simple } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction, chkType, publishType } from '@/api/hmmm/constants.js'
import { simple as simple2 } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys'
import moment from 'moment'
import { simple as simpleTwo } from '@/api/hmmm/directorys.js'

export default {
  data () {
    return {
      // 四个按钮默认选中的
      activeName: 0,
      // 四个按钮
      chkTypes: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '待审核'
        },
        {
          value: 2,
          label: '已审核'
        },
        {
          value: 3,
          label: '已拒绝'
        }
      ],
      // 审核id
      id: 0,
      // 审核显示
      dialogCheck: false,
      // 视频显示
      show: false,
      // 预览弹窗
      dialogVisible: false,
      // 预览详情
      detail: {},
      // 总数量
      title: '',
      // 题库列表
      tableData: [],
      // 筛选表单
      formList: {
        page: 1, // 页数
        pagesize: 5, // 每页个数
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null// 审核状态
      },
      // 学科列表
      subjects: [],
      // 试题类型
      questionType: questionType,
      // 难度
      difficulty: difficulty,
      // 方向
      direction: direction,
      // 标签
      tags: [],
      // 城市
      provinces: [],
      // 城市下地区
      citys: [],
      // 录入人
      creatorID: [],
      // 分页
      total: 0,
      // 二级目录
      twoLevelDirectory: [],
      // 审核答案
      option: [],
      // 答案标志位
      isChoice: 1,
      // 审核答案多选
      checkList: []
    }
  },
  // 子组件
  components: {
    Check
  },
  created () {
    // this.localQuestionsList()
    this.localFormList()
    this.localQusetList()
  },
  computed: {
    // 1.----预览按钮题型格式化
    quest () {
      const info = this.questionType.find(item => item.value === Number(this.detail.questionType))
      return info ? info.label : '其他'
    },
    // 2.----预览按钮难度格式化
    difficult () {
      const info = this.difficulty.find(item => item.value === Number(this.detail.difficulty))
      return info ? info.label : '其他'
    }
  },
  // 监听
  watch: {
    // 监听formList城市
    'formList.city': {
      async handler (val) {
        this.formList.province = null
        // 调用接口获取城市下列表
        try {
          const ret = await citys(this.formList.city)
          this.citys = ret
        } catch {
          this.$message.error('获取列表失败')
        }
      },
      deep: true
    },
    // 监听学科筛选二级目录
    'formList.subjectID': {
      async handler (val) {
        this.formList.catalogID = null
        // 调用接口获取二级目录
        try {
          const ret = await simpleTwo({ subjectID: this.formList.subjectID })
          this.twoLevelDirectory = ret.data
        } catch {
          // 获取失败
          this.$message.error('获取二级列表失败')
        }
      }
    }

  },
  methods: {
    // 功能0.---获取题库数据列表
    async localQusetList () {
      // 调用接口获取题库列表
      try {
        const ret = await choice(this.formList)
        if (ret.status === 200) {
          // 调用接口成功
          // 精选题库列表
          this.tableData = ret.data.items
          // 总共数量
          this.title = `数据一共${ret.data.counts}条`
          this.total = ret.data.counts
          // this.$refs.all.click()
        }
      } catch {
        this.$message.error('获取列表失败')
      }
    },
    // 功能1.---获取下拉表单数据
    async localFormList () {
      // 1.调用接口获取学科列表
      const ret = await simple1()
      // 2.调用接口获取标签列表
      const ret1 = await simple()
      // 3.调用接口获取城市列表
      const ret2 = await provinces()
      // 4.调用接口获取录入人列表
      const ret3 = await simple2()
      Promise.all([ret, ret1, ret2, ret3]).then(result => {
        // 1.学科列表
        this.subjects = result[0].data
        // 2.标签列表
        this.tags = result[1].data
        // 3.城市列表
        this.provinces = result[2]
        // 4.录入人列表
        this.creatorID = result[3].data
      }).catch(() => {
        this.$message.error('获取列表失败')
      })
    },
    // 功能2.---清除按钮
    reset () {
      this.$refs.FormRef.resetFields()
    },
    // ---考试类型格式化渲染
    formQuest (row) {
      const info = this.questionType.find(item => item.value === Number(row.questionType))
      return info ? info.label : '其他'
    },
    // ---录入时间格式化渲染
    formDate (row) {
      return moment(row.addDate).format('YYYY-MM-DD HH:mm:ss')
    },
    // ---难度格式化渲染
    formDiff (row) {
      const info = this.difficulty.find(item => item.value === Number(row.difficulty))
      return info ? info.label : '其他'
    },
    // ---审核状态格式化渲染
    formChk (row) {
      const info = chkType.find(item => item.value === Number(row.chkState))
      return info ? info.label : '其他'
    },
    // ---发布状态格式化渲染
    formPub (row) {
      const info = publishType.find(item => item.value === Number(row.publishState))
      return info ? info.label : '其他'
    },
    // 功能3.---筛选(搜索)按钮
    search () {
      this.localQusetList()
    },
    // 功能4.--- 预览按钮
    async see (row) {
      // 弹窗显示
      this.dialogVisible = true
      try {
        // 调用接口获取详情
        const ret = await detail(row)
        if (ret.status === 200) {
          // 获取成功
          // 当前试题的详情
          this.detail = ret.data
          // 答案选项
          this.option = ret.data.options
          // 多选中找到所有正确答案的对象
          const info = this.option.find(item => item.isRight === ret.data.isChoice)
          // 把正确答案的选项放到数组里
          this.checkList.push(info.isRight)
        }
      } catch {
        this.$message.error('获取详情失败')
      }
    },
    // 功能5.--- 关闭预览弹窗按钮
    handlerClose () {
      this.dialogVisible = false
      this.show = false
    },
    // 功能6.---分页页数
    onPageChange (page) {
      this.formList.page = page
      this.localQusetList()
    },
    // 功能7.---每页条数
    onPageSizeChange (pagesize) {
      this.formList.pagesize = pagesize
      this.localQusetList()
    },
    // 功能8.---审核按钮
    check (row) {
      // 弹窗显示
      this.dialogCheck = true
      // 父传子id
      this.id = row.id
    },
    // 功能9.---上下架试题
    async upDown (row) {
      const ret = await this.$confirm(`确定要${row.publishState === 1 ? '下架' : '上架'}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (ret === 'cancel') return
      if (row.publishState === 1) {
        row.publishState = 0
      } else if (row.publishState === 0 || row.publishState === 2) {
        row.publishState = 1
      }
      try {
        const res = await choicePublish({ id: row.id, publishState: row.publishState })
        if (res.status === 200) {
          this.$message.success(`${row.publishState === 0 ? '下架' : '上架'}成功`)
          this.localQusetList()
        }
      } catch {
        this.$message.error('上架或下架失败')
      }
    },
    // 功能10.---四个状态按钮
    handleClick () {
      if (Number(this.activeName) === 0) {
        this.formList.chkState = null
        this.localQusetList()
      } else if (Number(this.activeName) === 1) {
        this.formList.chkState = 0
        this.localQusetList()
      } else if (Number(this.activeName) === 2) {
        this.formList.chkState = 1
        this.localQusetList()
      } else if (Number(this.activeName) === 3) {
        this.formList.chkState = 2
        this.localQusetList()
      }
    },
    // 功能11.---删除按钮
    async handelDel (row) {
      const ret = await this.$confirm('确定要删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (ret === 'cancel') return
      try {
        const res = await remove(row)
        if (res.status === 200) {
          this.$message.success('删除成功')
          this.localQusetList()
        } else {
          this.$message.error(ret.message)
        }
      } catch {
        this.$message.error('删除失败')
      }
    }
  }
}

</script>

<style scoped lang='less'>
.text {
  font-size: 14px;
}
.clearfix span {
  font-size: 10px;
  color: pink;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
/deep/.el-card__header {
  padding-bottom: 0;
}
.el-select {
  width: 100%;
}
</style>
